<template>
    <div>
        <h3>班主任管理</h3>
        <table>
            <thead>
                <tr>
                    <th>编号</th>
                    <th>专业</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in directorList" :key="item._id">
                    <td>{{item._id}}</td>
                    <td style="width:150px">{{item.name}}</td>
                    <td  style="width:120px">
                        <button class="del_btn" @click="delDirectorApi(item._id)">删除</button>
                        <button class="modify_btn" @click="updateDirector(item._id)">修改</button>
                    </td>
                </tr>
            </tbody>
        </table>
        <div>
            <h3>增加班主任</h3>
            <div>
                <label for="">姓名：</label>
                <input type="text" v-model="director.name">
            </div>
             <div>
                <label for="">性别：</label>
                <select v-model="director.gender">
                    <option value="1">男</option>
                    <option value="0">女</option>
                </select>
            </div>
            <div>
                <label for="">电话:</label>
                <input type="text" v-model="director.phone">
            </div>
            <div>
                <button @click="addDirectorApi">增加</button>
            </div>
        </div>

        <div class="upDialog" v-show="visiable">
             <h3>修改班主任</h3>
            <div>
                <label for="">姓名：</label>
                <input type="text" v-model="upDirector.name">
            </div>
             <div>
                <label for="">性别：</label>
                <select v-model="upDirector.gender">
                    <option value="1">男</option>
                    <option value="0">女</option>
                </select>
            </div>
            <div>
                <label for="">电话:</label>
                <input type="text" v-model="upDirector.phone">
            </div>
            <div>
                <button @click="modifyDirectorApi">修改</button>
            </div>
        </div>
    </div>
</template>

<script>
/*
    使用axios的步骤
    1、通过import的方式导入axios
    2、通过axios方法来完成相应的请求
    axios({
        method:请求方式,
        url:请求的路径,
        ...
    })
*/
import axios from 'axios'
export default {
    data(){
        return{
            directorList:[],
            director:{
                name:'',
                gender:1,
                phone:''
            },
            upDirector:{},
            visiable:false
        }
    },
    methods:{
        getSubjectsApi(){
            axios({
                method:'GET',//如果axios的请求方式是get请求可以省略method
                url:'http://www.zhaijizhe.cn:3005/directors/getDirectors'
            }).then(response=>{
               this.directorList=response.data.data.result
            })
        },
        async addDirectorApi(){
            const result=await axios({
                method:'POST',
                url:'http://www.zhaijizhe.cn:3005/directors/addDirectors',
                data:this.director
            })
            if(result.data.code){
                alert(result.data.message)
                this.getSubjectsApi()   
            }
        },
        async delDirectorApi(_id){
            if(confirm('您确定要删除吗?')){
                const result=await axios({
                    method:'DELETE',
                    url:'http://www.zhaijizhe.cn:3005/directors/deleteDirectors',
                    data:{
                        _id
                    }
                })
                if(result.data.code){
                    this.getSubjectsApi()
                }
            }
        },
        updateDirector(_id){
           this.visiable=true
           let director=this.directorList.find(item=>item._id==_id)
           this.upDirector={...director}
        },
        async modifyDirectorApi(){
            const result=await axios({
                method:"PUT",
                url:"http://www.zhaijizhe.cn:3005/directors/updateDirectors",
                data:this.upDirector
            })
            if(result.data.code){
                //关闭模态框
                this.visiable=false
                alert(result.data.message)
                this.getSubjectsApi()
            }
        }
    },
    created(){
        this.getSubjectsApi()
    }
}
</script>

<style scoped>
    table{
        width: 500px;
        border-collapse: collapse;
    }
    td,th{
        border:1px solid #000;
        padding: 5px;
    }
    th{
        background-color: orange;
        color: white;
    }
    .del_btn{
        width: 50px;
        height: 30px;
        background-color: #c00;
        color: white;
        border: none;
    }
    .modify_btn{
        width: 50px;
        height: 30px;
        background-color: skyblue;
        color: white;
        border: none;
    }
    .upDialog{
        background:#f5f5f5;
        padding: 10px;
        left: 100px;
        top: 100px;
        position:absolute;
    }
</style>